import type { TabsProps } from 'antd';
import React, { useCallback } from 'react';
import { Table, Tabs, type ColumnProps } from '../../functionalComponent';
import { getCompletedNodeInfo, getUnHandledNodeInfo } from './service';

/**
 * @description 已办节点tabkey
 */
const TAB_COMPLETED_KEY = '1';

/**
 * @description 未办节点tabkey
 */
const TAB_UNHANDLED_KEY = '2';

interface WFApprovalProgressProps {
  taskId: string;
}

const WFApprovalProgress: React.FC<WFApprovalProgressProps> = (props) => {
  const { taskId } = props;
  const columns: ColumnProps[] = [
    {
      dataIndex: 'rows',
      title: '序号',
      width: 80,
      align: 'center',
      render: (row) => <>{row.rowIndex + 1}</>
    },
    {
      title: '节点名称',
      dataIndex: 'nodeName'
    }
  ];

  /**
   * @description 获取已办节点信息
   */
  const queryCompletedNodeInfo = useCallback(({ pageIndex, pageSize }) => {
    return getCompletedNodeInfo({ taskId, pageSize, pageIndex });
  }, []);

  /**
   * @description 获取待办节点信息
   */
  const queryUnHandledNodeInfo = useCallback(({ pageIndex, pageSize }) => {
    return getUnHandledNodeInfo({ taskId, pageSize, pageIndex });
  }, []);

  // tabs配置项
  const tabItems: TabsProps['items'] = [
    {
      key: TAB_COMPLETED_KEY,
      label: '已办节点',
      children: <Table request={queryCompletedNodeInfo} columns={columns} bordered pagination style={{ height: 360 }} />
    },
    {
      key: TAB_UNHANDLED_KEY,
      label: '未办节点',
      children: <Table request={queryUnHandledNodeInfo} columns={columns} bordered pagination style={{ height: 360 }} />
    }
  ];

  return (
    <div style={{ padding: '5px 20px 0 20px' }}>
      <Tabs defaultActiveKey="1" items={tabItems} />
    </div>
  );
};
export default WFApprovalProgress;
